<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>storage</title>
</head>
<body>
    <input type="button" value="clearAll" id="clearAll">

    <h2>1、sessionStorage</h2>
    <div id="div1">
        sessionTest: 
        <input type="button" value="设置">
        <input type="button" value="获取">
        <input type="button" value="删除">
        <input type="text">
    </div>



    <h2>2、localStorage</h2>
    <div id="div2">
        localTest:
        <input type="button" value="设置">
        <input type="button" value="获取">
        <input type="button" value="删除">
        <input type="text">
    </div>



    <h2>3、保存注册信息</h2>
    <div id="div3">
        <p>name：
            <input type="text">
        </p>
        <p>sex：
            <input type="radio" value="男" name="sex">男
            <input type="radio" value="女" name="sex">女
        </p>
        <p>
            content：
            <textarea id="txt3"></textarea>
        </p>    
    </div>


    <h2>4、同步购物车</h2>
    <div id="div4">
        <input type="checkbox" value="香蕉">香蕉
        <input type="checkbox" value="苹果">苹果
        <input type="checkbox" value="葡萄">葡萄
        <input type="checkbox" value="西瓜">西瓜
    </div>

<script>
   
window.onload = function(){

    // 清空storage
    var oClearAll = document.getElementById("clearAll");
    oClearAll.onclick = function(){
        window.sessionStorage.clear();
        window.localStorage.clear();
    }





    // 1、sessionStorage: 临时性存储, 页面间数据不同享，浏览器关闭，本地存储消失
    var oDiv1 = document.getElementById("div1");
    var aInput1 = oDiv1.getElementsByTagName("input");
    aInput1[0].onclick = function(){
        window.sessionStorage.setItem('sessionTest', aInput1[3].value);
    }
    aInput1[1].onclick = function(){
        alert(window.sessionStorage.getItem('sessionTest'));
    }
    aInput1[2].onclick = function(){
        window.sessionStorage.removeItem('sessionTest');
    }







    // 2、localStorage: 永久性存储
    var oDiv2 = document.getElementById("div2");
    var aInput2 = oDiv2.getElementsByTagName("input");
    aInput2[0].onclick = function(){
        window.localStorage.setItem('localTest', aInput2[3].value);
    }
    aInput2[1].onclick = function(){
        alert(window.localStorage.getItem('localTest'));
    }
    aInput2[2].onclick = function(){
        window.localStorage.removeItem('localTest');
        // window.localStorage.clear();   //删除全部数据
    }






    // 3、保存注册信息
    var oDiv3 = document.getElementById("div3");
    var aInput3 = oDiv3.getElementsByTagName("input");
    var txt3 = document.getElementById("txt3");

    // 进入页面，先去localStorage取数据
    if(window.localStorage.getItem("name")){
        aInput3[0].value = window.localStorage.getItem("name");
    }

    if(window.localStorage.getItem("sex")){
        for(var i=1; i<aInput3.length; i++){
            if(aInput3[i].value == window.localStorage.getItem("sex")){
                aInput3[i].checked = true;
            }
        }
    }

    if(window.localStorage.getItem("content")){
        txt3.value = window.localStorage.getItem("content");
    }

    // 当浏览器关闭的时候，会触发window.onload事件
    window.onunload = function(){
        // 把注册信息保存到localStorage
        if(aInput3[0].value){
            window.localStorage.setItem("name", aInput3[0].value);
        }

        for(var i=1; i<aInput3.length; i++){
            if(aInput3[i].checked == true){
                window.localStorage.setItem("sex", aInput3[i].value);
            }
        }

        if(txt3.value){
            window.localStorage.setItem("content", txt3.value);
        }
    }

    // 在FF，生效; chrom触发不了storage事件，为什么？放到服务器下
    // 当前页面不会触发，同浏览器其他同源页面能触发--看看35_storage.html页面的控制台||再打开当前页面的一个tab

    myAddEvent(window, "storage", function(ev){
        console.log(ev.key);
        console.log(ev.newValue);
        console.log(ev.oldValue);
        console.log(ev.storageArea);
        console.log(ev.url);
    });







    // 4、同步购物车
    var oDiv4 = document.getElementById("div4");
    var aInput4 = oDiv4.getElementsByTagName("input");

    for(var i=0; i<aInput4.length; i++){
        aInput4[i].onclick = function(){
            if(this.checked){  //被选中
                window.localStorage.setItem('sel', this.value);
            }
            else{  //被取消
                window.localStorage.setItem('unSel', this.value);
            }
        }
    }

    myAddEvent(window, "storage", function(ev){
        if(ev.key == "sel"){
            for(var i=0; i<aInput4.length; i++){
                if(aInput4[i].value == ev.newValue){
                    aInput4[i].checked = true;
                }
                // if(aInput4[i].value == ev.oldValue){
                //     aInput4[i].checked = false;
                // }
            }
        }
        else if(ev.key == "unSel"){
            for(var i=0; i<aInput4.length; i++){
                if(aInput4[i].value == ev.newValue){
                    aInput4[i].checked = false;
                }
                // if(aInput4[i].value == ev.oldValue){
                //     aInput4[i].checked = true;
                // }
            }
        }
    });
}










function myAddEvent(obj, ev, fn){
    if(obj.attachEvent){
        obj.attachEvent('on'+ev, fn);
    }
    else{
        obj.addEventListener(ev, fn, false)
    }
}

</script>
</body>
</html>